<template>
	<u-tabs
		v-if="showData.type === '2'"
		name="title"
		:inactive-color="showData.fontColor"
		:bg-color="showData.bgColor"
		:list="showData.navList"
		:is-scroll="false"
		v-model="current"
	></u-tabs>
	<u-grid v-if="showData.type === '1'" :col="showData.showNum" :border="false">
		<u-grid-item v-for="(item, index) in showData.navList" @click="toPage(item.linkUrl)" :key="index" :bg-color="showData.bgColor">
			<image :src="item.url" mode="aspectFill" style="height: 25px; width: 25px"></image>
			<view class="grid-text">{{ item.title }}</view>
		</u-grid-item>
	</u-grid>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { toJumpUrl } from '@/utils/index';

defineProps({
	showData: {
		type: Object,
		default: () => {},
	},
});
const current = ref(0);
const toPage = (jumpUrl: string) => {
	toJumpUrl(jumpUrl);
};
</script>

<style scoped lang="scss">
.grid-text {
	font-size: 28rpx;
	margin-top: 4rpx;
	color: $u-type-info;
}
</style>
